<template>
  <ScreenLayoutWithMenu title="数据可视化大屏 - 运输配送">
    <!-- KPI统计数据行 -->
    <div class="kpi-section">
      <KPICard label="按时到货订单数" value="61,384" />
      <KPICard label="到货及时率" value="61.38%" orange />
      <KPICard label="库存周转率" value="2.24" green />
      <KPICard label="库存覆盖天数" value="45.1" green />
      <KPICard label="毛利率" value="65.16%" orange />
    </div>

    <!-- 图表区域 -->
    <div class="screen-grid grid-2x2">
      <ChartCard title="订单运输状态占比分析" grid-area="a">
        <ECharts :option="shippingStatusOption" />
      </ChartCard>
      <ChartCard title="运输公司订单数量分布" grid-area="b">
        <ECharts :option="shippingCompanyOption" />
      </ChartCard>
      <ChartCard title="订单完成情况数据占比" grid-area="c">
        <ECharts :option="orderCompletionOption" />
      </ChartCard>
      <ChartCard title="运输方式订单数量分布" grid-area="d">
        <ECharts :option="shippingMethodOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import KPICard from '../components/KPICard.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import * as echarts from 'echarts'
import './Screen.css'

const shippingStatusOption = ref({})
const shippingCompanyOption = ref({})
const orderCompletionOption = ref({})
const shippingMethodOption = ref({})

onMounted(() => {
  // 订单运输状态占比分析
  shippingStatusOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: { color: '#fff' },
      data: ['已发货', '待发货', '已到达', '运输中']
    },
    series: [
      {
        name: '运输状态',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#0a0e27',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}: {d}%',
          color: '#fff'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        data: [
          { value: 24720, name: '已发货', itemStyle: { color: '#1890ff' } },
          { value: 25370, name: '待发货', itemStyle: { color: '#36cfc9' } },
          { value: 24870, name: '已到达', itemStyle: { color: '#52c41a' } },
          { value: 25050, name: '运输中', itemStyle: { color: '#ff9800' } }
        ]
      }
    ]
  }

  // 运输公司订单数量分布
  shippingCompanyOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: {
      left: '20%',
      right: '10%',
      top: '10%',
      bottom: '15%'
    },
    xAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
    },
    yAxis: {
      type: 'category',
      data: ['ShippingCompany_4', 'ShippingCompany_19', 'ShippingCompany_12', 'ShippingCompany_16', 
             'ShippingCompany_8', 'ShippingCompany_20', 'ShippingCompany_5'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' }
    },
    series: [
      {
        name: '订单数量',
        type: 'bar',
        data: [5008, 5017, 5032, 5049, 5094, 5103, 5104],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#52c41a' },
            { offset: 1, color: '#1890ff' }
          ])
        },
        label: {
          show: true,
          position: 'right',
          color: '#fff'
        }
      }
    ]
  }

  // 订单完成情况数据占比
  orderCompletionOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: { color: '#fff' },
      data: ['正常', '延迟']
    },
    series: [
      {
        name: '完成情况',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#0a0e27',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}: {d}%',
          color: '#fff'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        data: [
          { value: 38.62, name: '正常', itemStyle: { color: '#52c41a' } },
          { value: 61.38, name: '延迟', itemStyle: { color: '#ff4d4f' } }
        ]
      }
    ]
  }

  // 运输方式订单数量分布
  shippingMethodOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: {
      left: '20%',
      right: '10%',
      top: '10%',
      bottom: '15%'
    },
    xAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
    },
    yAxis: {
      type: 'category',
      data: ['Land', 'Air', 'Sea'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' }
    },
    series: [
      {
        name: '订单数量',
        type: 'bar',
        data: [33180, 33351, 33469],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#52c41a' },
            { offset: 1, color: '#1890ff' }
          ])
        },
        label: {
          show: true,
          position: 'right',
          color: '#fff'
        }
      }
    ]
  }
})
</script>

